<template>
  <view class="box_bg" :style="{ backgroundImage: 'url(' + imgUrl + ')' }">
    <uni-nav-bar
      :fixed="fixed"
      :border="false"
      :statusBar="true"
      :backgroundColor="
        isBackGround ? '#3e6ff0' : imgUrl ? 'transparent' : '#fff'
      "
      :color="isBackGround ? '#fff' : '#000'"
      :height="height"
    >
      <!-- 中间 -->
      <view class="center">
        <view class="center_title" v-if="title">{{ title }}</view>
        <slot name="center"></slot>
      </view>
      <!-- 左侧插槽 -->
      <template v-slot:left>
        <view v-if="leftIcon" class="left" @click="$emit('onLeftIcon')">
          <uni-icons
            :type="leftIcon"
            size="20"
            :color="isBackGround ? '#fff' : '#000'"
          ></uni-icons>
        </view>
        <slot name="left"></slot>
      </template>
      <!-- 右侧插槽 -->
      <template v-slot:right>
        <view v-if="rightIcon" class="right" @click="$emit('onRightIcon')">
          <uni-icons
            :type="rightIcon"
            size="30"
            :color="isBackGround ? '#fff' : '#000'"
          ></uni-icons>
        </view>
        <slot name="right"></slot>
      </template>
    </uni-nav-bar>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    leftIcon: {
      type: String,
      default: "",
    },
    rightIcon: {
      type: String,
      default: "",
    },
    isBackGround: {
      type: Boolean,
      default: true,
    },
    height: {
      type: Number,
      default: 44,
    },
    fixed: {
      type: Boolean,
      default: false,
    },
    imgUrl: {
      type: String,
      default: "",
    },
    
  },
}
</script>

<style lang="scss">
.box_bg {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.center {
  margin: 0 auto;
  align-self: center;

  .center_title {
    font-size: 36rpx;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
